<template>
	<view class="content">
		<view class="one-box">
			<view class="title">意見反餽</view>
			<textarea v-model="content" placeholder="請您盡可能細緻的描述問題,使我們更快跟進溝通" placeholder-style="color:#9E9E9E"></textarea>
			<view class="title">上傳圖片</view>
			<view style="margin-top:24rpx;">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3" width="180" height="180">
					<view class="upload-content">
						<image src="../../static/image/index/add-img.png" mode=""></image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="one-box" style="margin-top:24rpx;">
			<view class="title">聯繫方式</view>
			<view class="tel-infor">
				<input type="tel" v-model="mobile" placeholder="請輸入聯繫方式" placeholder-style="color:#CCCCCC">
			</view>
		</view>
		<view class="add-btn" @click="upLoad">提交</view>
	</view>
</template>

<script>
	import {toFeedBack} from '../../request/api.js'
	export default {
		data() {
			return {
				fileList1:[],
				content:'',
				mobile:''
			};
		},
		computed:{
			imgUrl() {
				return this.$store.state.user.imgUrl
			}
		},
		methods:{
			// 提交反馈
			async upLoad(){
				if (!this.mobile) {
					uni.showToast({
						title: '請填寫聯繫方式',
						icon: 'none'
					})
					return
				}
				if (!this.content) {
					uni.showToast({
						title: '請填寫反饋內容',
						icon: 'none'
					})
					return
				}
				let urlList=this.fileList1.map((item)=>{
					return item.url
				})
				uni.showLoading({
					title:"提交中..."
				})
				let res= await toFeedBack({
					content:this.content,
					mobile:this.mobile,
					images:urlList.join(",")
				})
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if(res.code==1){
					this.fileList1=[];
					this.content='';
					this.mobile='';
				}
			},
			// 新增图片 这个是上传图像的方法
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				// 用于存储符合条件的图片
				let Images = [];
				// 遍历上传的每张图片
				for (let i = 0; i < lists.length; i++) {
					const item = lists[i];
					Images.push(item)
				}
				let fileListLen = this[`fileList${event.name}`].length
				Images.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < Images.length; i++) {
					const result = await this.uploadFilePromise(Images[i].url)
					// 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
					console.log(result, '上传图像result');
					// this.infoForm.avatar = result
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result.status,
						message: result.status == 'failed' ? '上传失败' : '',
						url:result.url
					}))
					fileListLen++
				}
				console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.imgUrl + '/driver/common/upload', //后端接口地址
						filePath: url,
						name: 'file', //传给后端参数
						header: {
							'token': uni.getStorageSync('token')
						},
						formData: {
							path: 'avatar/user'
						},
						success: (res) => {
							console.log(res);
							if (res.statusCode == 200) {
								resolve({
									url: JSON.parse(res.data).data.url,
									status: 'success'
								})
							} else {
								resolve({
									url: url,
									status: 'failed'
								})
							}
						}
					});
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
		.content{
			width:702rpx;margin-left:auto;
			margin-right:auto;padding-top:24rpx;
			.one-box{
				width:100%;background-color:#FFFFFF;
				border-radius: 15rpx;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				padding:24rpx;box-sizing: border-box;
				.title{
					font-size:30rpx;color:#040404;line-height:42rpx;
				}
				textarea{
					width:654rpx;height:200rpx;background-color: #F6F6F6;
					padding:24rpx;box-sizing: border-box;border-radius: 15rpx;
					font-size:26rpx;margin-top:24rpx;margin-bottom:24rpx;
				}
				.upload-content{
					width:180rpx;height:180rpx;background-color: #F6F6F6;
					border-radius: 15rpx;display: flex;
					align-items: center;justify-content: center;
					image{
						width:30rpx;height:31rpx;
					}
				}
				.tel-infor{
					margin-top:38rpx;border-bottom:1px solid #F0F0F0;
					padding-bottom:10rpx;
				}
			}
			.add-btn{
				width:650rpx;height:98rpx;background-color:#040404;
				display: flex;align-items: center;justify-content: center;
				border-radius: 98rpx;font-size:36rpx;color:#Ffffff;
				position: fixed;bottom:30rpx;left:50rpx;
			}
		}
	}
</style>
